<template>
  <div class="active-live">
    <!-- 正常尺寸视频 -->
    <div class="active-item" v-for="(video, index) in videos" :key="index">
<!--      <div class="status">直播中</div>-->
      <video
          class="active-live-item"
          :src="video.src"
          :poster="video.poster"
          muted
          loop
          @click="openFullscreen(video)"
      ></video>
    </div>

    <!-- 全屏播放器 -->
    <div class="fullscreen-player" v-if="fullscreenVideo" @click.self="closeFullscreen">
      <div class="player-container">
        <video
            ref="fullscreenVideo"
            controls
            autoplay
            :src="fullscreenVideo.src"
            class="fullscreen-video"
        ></video>
        <div class="video-title">{{ fullscreenVideo.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ActiveLive',
  data() {
    return {
      videos: [
        {
          src: 'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/b1b10934-8f3b-4608-806f-8bfaa3033a885.mp4',
          poster: require('@/assets/images/live-1.png'),
          title: '视频1'
        },
        {
          src: 'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/jinquan/e000063lqag.oLhx10002.mp4',
          poster: require('@/assets/images/live-2.png'),
          title: '视频2'
        }
      ],
      fullscreenVideo: null
    }
  },
  methods: {
    openFullscreen(video) {
      this.fullscreenVideo = video;
      this.$nextTick(() => {
        const videoEl = this.$refs.fullscreenVideo;
        videoEl.muted = false; // 取消静音
        videoEl.play().catch(e => {
          console.log('播放失败:', e);
          // 如果自动播放被阻止，显示控件让用户手动播放
          videoEl.controls = true;
        });
      });
    },
    closeFullscreen() {
      this.fullscreenVideo = null;
    }
  },
  mounted() {
    // 自动播放小窗口视频（静音）
    const videos = this.$el.querySelectorAll('.active-live-item');
    videos.forEach(video => {
      video.muted = true;
      video.play().catch(e => console.log('小窗口自动播放被阻止:', e));
    });
  }
}
</script>

<style scoped lang="scss">
.active-live{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .active-item{
    width: calc(50% - 10px);
    height: 100%;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.02);
      box-shadow: 0 0 15px rgba(0, 198, 255, 0.5);
    }

    .status{
      position: absolute;
      top: 10px;
      right: 10px;
      width: 56px;
      height: 22px;
      background: #ea0000;
      font-size: 12px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      z-index: 2;
    }

    .active-live-item{
      width: 100%;
      height: 100%;
      border-radius: 5px;
      object-fit: cover;
      background: #000;
    }
  }

  /* 全屏播放器样式 */
  .fullscreen-player {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;

    .player-container {
      width: 80%;
      max-width: 1200px;
      position: relative;

      .fullscreen-video {
        width: 100%;
        height: 80vh;
        background: #000;
      }

      .video-title {
        position: absolute;
        bottom: 50px;
        left: 0;
        width: 100%;
        color: white;
        font-size: 18px;
        text-align: center;
        padding: 10px;
        background: rgba(0, 0, 0, 0.5);
      }

      .close-btn {
        position: absolute;
        top: -40px;
        right: 0;
        background: #ea0000;
        color: white;
        border: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background: #ff0000;
        }
      }
    }
  }
}
</style>
